<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>App组件的使用</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
		<style>
			.app{
				background-color: gray;
				padding: 10px;
			}
			.school{
				background-color: skyblue;
				padding: 10px;
			}
			.person{
				background-color: orange;
				padding: 10px;
			}
			.hello{
				background-color: pink;
				padding: 10px;
			}
		</style>
	</head>
	<body>
		<!-- 
				几个注意点：
						1.关于组件名:
								一个单词组成：
											第一种写法(首字母小写)：school
											第二种写法(首字母大写)：School
								多个单词组成：
											第一种写法(kebab-case命名)：my-school
											第二种写法(CamelCase命名)：MySchool
								备注：可以使用name配置项指定组件在开发者工具中呈现的名字。

						2.关于组件标签:
								第一种写法：<组件名></组件名> 
								第二种写法：<组件名/>	
		-->
		<!-- 准备好一个容器-->
		<div id="demo"></div>
	</body>

	<script type="text/javascript">
		Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

		const peiqi = Vue.extend({
			name:'Hello',
			template:`
					<div class="hello">
						<h2>{{msg}}</h2>
						<button @click="showMsg">点我欢迎你</button>
					</div>
			`,
			data(){
				return {
					msg:'欢迎老同学！'
				}
			},
			methods:{
				showMsg(){
					alert(this.msg)
				}
			}
		})

		Vue.component('Qiaozhi',peiqi) //全局注册

		const School = Vue.extend({
			name:'School',
			template:`
				<div class="school">
					<Qiaozhi/>
					<h2>学校名称：{{sname}}</h2>
					<h2>学校地址：{{address}}</h2>
					<button @click="showSchool">提示学校信息</button>
					<button @click="sname += '！'">修改学校名</button>	
				</div>
			`,
			data(){
				return {
					sname:'尚硅谷',
					address:'宏福科技园',
				}
			},
			methods: {
				showSchool(){
					alert(`${this.sname},${this.address}`)
				},
			}
		})

		const Person = Vue.extend({
			name:'Person',
			template:`
				<div class="person">
					<Qiaozhi/>
					<h2>人的姓名：{{pname}}</h2>
					<h2>人的年龄：{{age}}</h2>
					<button @click="showPerson">提示人的信息</button>
					<button @click="age++">修改年龄</button>
				</div>
			`,
			data(){
				return {
					pname:'张三',
					age:18
				}
			},
			methods: {
				showPerson(){
					alert(`${this.pname},${this.age}`)
				}
			},
		})

		const App = Vue.extend({
			name:'App',
			components:{'my-school':School,Person},
			template:`
				<div class="app">
					<my-school/>
					<hr>
					<Person/>
				</div>
			`,
		})
		
		//创建vm
		new Vue({
			el:'#demo',
			components:{App},
			template:`<App></App>`
		})
	</script>
</html>